<template>
  <div class="container">
    <div class="left-box">
      <div class="title">
        <h4>{{title}}</h4>
      </div>
      <div class="tree">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
    </div>
    <div class="right-box">
      <NavContent :navcontent="navcontent"/>
    </div>
  </div>
</template>

<script>
import NavContent from '../../components/navContent/index.vue'
export default {
  components: {
    NavContent
  },
  data () {
    return {
      // 左侧标题
      title: '扩展点文档',
      // 列表内容
      data: [{
        label: '交易'
      }, {
        label: '营销'
      }, {
        label: '库存'
      }],
      navcontent: {
        title: '扩展点列表',
        titleOne: '交易',
        // 下拉框
        options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '微商城单店'
        }, {
          value: '选项3',
          label: '有赞连锁D-总部'
        }, {
          value: '选项4',
          label: '有赞连锁D-网店'
        }, {
          value: '选项5',
          label: '零售单店'
        }, {
          value: '选项6',
          label: '有赞连锁L-总部'
        }, {
          value: '选项7',
          label: '有赞连锁L-总部-高级版'
        }, {
          value: '选项8',
          label: '有赞连锁L-网店'
        }],
        value: '',
        tableData: [{
          name: '三方-查询买家优惠凭证列表',
          methodName: 'list',
          address: '触发场景：\n 1、消费者在C端个人中心页面，查看优惠券码数量，触发该扩展点；'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick (data) {
      this.navcontent.titleOne = data.label;
      console.log(this.navcontent.titleOne);
    }
  }
};
</script>

<style lang="less" scoped>
// 容器
.container {
  margin: auto;
  width: 1200px;
  display: flex;
// 左侧盒子
  .left-box {
    width: 213px;
    margin-top: 24px;
    text-align: left;
    border-right: 1px solid #fff;
    // 标题
    .title {
      line-height: 45px;
      width: 190px;
      border-bottom: 1px solid #f2f2f2;
    }
    // nav列表
    .tree {
      /deep/.el-tree-node__content {
        height: 40px;
      }
    }
  }
  .right-box {
    flex: 1;
    margin-top: 24px;
    padding: 0px 40px 24px 40px;
    border-left: 1px solid #f2f2f2;
  }
}
</style>